<script setup lang='ts'>
import Footer from '@/pages/footer/footer.vue'
import { useGetHelpInfo } from '@fl/api/man-api'
import { useGetHelpTab } from '@fl/api/man-api/help-admin'
import { DownLink } from '@fl/components'
import { genOssUrl, oss } from '@fl/logics/oss'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const tenderImg = genOssUrl(oss.mall.tender)

const activeNames = ref([0])
const activeMenu = ref<any>([])
const form = ref({
    keyword: '',
    type: '1', // 1 采购   2 供应
})

// const flag = ref<any>()

function getFileList(val: any) {
    return val?.attachment ? JSON.parse(val.attachment) : []
}

const params = computed(() => {
    return form.value.type
})

const { data } = useGetHelpInfo(params)

const getMenu = computed(() => {
    const { keyword } = form.value
    return keyword ? filterMenu(data.value, keyword) : data.value ?? []
})

// 查询tab
const { data: tabsList } = useGetHelpTab()

function filterMenu(vals: any, key: string) {
    const target: any = []
    vals.forEach((val: any) => {
        if (val.name.includes(key)) {
            target.push(val)
        }
        else {
            let rgx = false
            let rgx2 = false

            if (val?.catalogVoList?.length) {
                // eslint-disable-next-line unicorn/prefer-includes
                rgx = val.catalogVoList.some((v: any) => v.name.indexOf(key) !== -1)
            }
            else if (val?.contentVOList?.length) {
                // eslint-disable-next-line unicorn/prefer-includes
                rgx2 = val.contentVOList.some((v: any) => v.title.indexOf(key) !== -1)
            }

            if (rgx || rgx2) {
                target.push(val)
            }
        }
    })

    return target
}

function search() {
    console.log(2222, data.value)
    console.log(333, form, route)
}

function change() {
    activeMenu.value = []
}

function view(item: any) {
    if (item?.contentVOList && item.contentVOList.length) {
        activeNames.value = item?.contentVOList[0].id
    }

    activeMenu.value = item?.contentVOList ?? []
}

function handleChange() {

}

// function btnHand(val: number) {
//     flag.value = val
// }
</script>

<template>
    <div class="relative h-310 w-full"
         :style="{ 'background': `url('${tenderImg}') 0% 0% / auto 100% no-repeat`, 'background-position': 'center' }"
    >
        <div class="tender-linear absolute size-full inset-0 z-1" />

        <div class="pt-88 mx-auto relative h-full w-1300 z-2">
            <div class="mb-40 text-40 c-#FFF font-600 z-2">
                有问题 搜一搜
            </div>

            <div class="w-880">
                <el-input v-model.trim="form.keyword"
                          clearable
                          placeholder="请输入问题关键词,如“如何查询须求单”"
                          class="search-input mr-80"
                          maxlength="20"
                >
                    <template #prepend>
                        <el-select v-model="form.type"
                                   style="width: 90px"
                                   @change="change"
                        >
                            <el-option v-for="item in tabsList"
                                       :key="item.dictCode"
                                       :label="item.dictLabel"
                                       :value="item.dictValue"
                            />
                        </el-select>
                    </template>

                    <template #append>
                        <el-button class=""
                                   @click="search"
                        >
                            搜索
                        </el-button>
                    </template>
                </el-input>
            </div>
        </div>
    </div>

    <p class="py-20 mx-auto text-14 c-#767676 flex w-1300 items-center">
        <span class="mr-13">首页</span>

        <el-icon>
            <ArrowRight />
        </el-icon>

        <span class="ml-13 c-#DA0004">帮助中心</span>
    </p>

    <div class="mx-auto flex w-1300 justify-between">
        <div class="help-menu bg-#fff rounded-4 h-530 w-210">
            <el-menu :key="form.type"
                     default-active="1"
                     unique-opened
                     active-text-color="#DA0004"
            >
                <template v-for="(item, index) in getMenu"
                          :key="index"
                >
                    <el-menu-item v-if="!item?.catalogVoList"
                                  :index="item.id"
                                  @click="view(item)"
                    >
                        <el-tooltip :disabled="item.name.length < 20"
                                    effect="light"
                                    :content="item.name"
                                    placement="top"
                        >
                            <span class="text-ellipsis w-210 ws-nowrap of-hidden">{{ item.name }}</span>
                        </el-tooltip>
                    </el-menu-item>

                    <el-sub-menu v-else
                                 :index="item.id"
                    >
                        <template #title>
                            <el-tooltip :disabled="item.name.length < 20"
                                        effect="light"
                                        :content="item.name"
                                        placement="top"
                            >
                                <span class="text-ellipsis w-210 ws-nowrap of-hidden">{{ item.name }}</span>
                            </el-tooltip>
                        </template>

                        <template v-for="(ite, i) in item.catalogVoList"
                                  :key="`${index}-${i}`"
                        >
                            <el-menu-item :index="`${item.id}-${ite.id}`"
                                          @click="view(ite)"
                            >
                                <el-tooltip :disabled="ite.name.length < 20"
                                            effect="light"
                                            :content="ite.name"
                                            placement="top"
                                >
                                    <span class="text-ellipsis w-210 ws-nowrap of-hidden">{{ ite.name }}</span>
                                </el-tooltip>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
            </el-menu>
        </div>

        <div class="menu-content p-30 pb-110 bg-#fff rounded-4 relative min-h-530 w-1070">
            <el-collapse v-if="activeMenu?.length"
                         v-model="activeNames"
                         @change="handleChange"
            >
                <template v-for="(item, index) in activeMenu"
                          :key="index"
                >
                    <el-collapse-item :title="item.title"
                                      :name="item.id"
                    >
                        <div class="rich-text"
                             v-html="item?.content"
                        />

                        <div v-if="getFileList(item).length"
                             class="space-y-8 mx-auto mt-30 flex flex-col w-1000"
                        >
                            <span class="text-16">附件：</span>

                            <DownLink :file-list="getFileList(item) " />
                        </div>
                    </el-collapse-item>
                </template>
            </el-collapse>
        </div>
    </div>

    <Footer />
</template>

<style lang="less" scoped>
.menu-content {
    .el-collapse {
        border-top-color: transparent;
        border-bottom-color: transparent;

        :deep(.el-collapse-item__header) {
            height: 100%;
            color: #da0004;
            font-size: 24px;
            font-weight: 600;
            border-bottom-color: #d8d8d8;
            margin-bottom: 10px;
        }
    }
}

.search-input {
    .el-input-group__prepend {
        .el-select {
            height: 100%;
            background: #fff;

            :deep(.el-select__wrapper) {
                height: 100%;
            }
        }
    }

    :deep(.el-input-group__append) {
        background: #da0004;
        box-shadow: none !important;

        .el-button--default {
            color: #fff;
        }
    }
}

.tender-linear {
    background: linear-gradient(
        180deg,
        rgb(29 33 41 / 37%) 0%,
        rgb(29 33 41 / 70%) 100%
    );
}

.jc-footer {
    background: #fff;
    margin-top: 20px;
}

.help-menu {
    overflow-y: auto;

    .el-menu {
        border-right: none;
    }
}

.rich-text {
    overflow: auto;

    :deep(ol),
    :deep(ul) {
        padding-inline: revert-layer;
        list-style: auto;
    }

    :deep(hr) {
        background-color: #ccc;
        border: 0;
        display: block;
        height: 1px;
    }
}

// 自定义整个滚动条
.help-menu::-webkit-scrollbar {
    width: 4px;
}

/* 自定义滚动条轨道 */
.help-menu::-webkit-scrollbar-track {
    // background: #f1f1f1;
}

/* 自定义滚动条的滑块（thumb） */
.help-menu::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
.help-menu::-webkit-scrollbar-thumb:hover {
    // background: #555;
}
</style>
